<template>
  <div class="exampleitem2-top">
    <NavHeader />
    <div class="exampleitem2-top-content">
      <h1>高效、准确的数据采集解决方案</h1>
      <h3>为企业提供全面、实时的渠道数据采集，助于精准营销与决策</h3>
    </div>
  </div>
  <div class="exampleitem2-center">
    <div class="exampleitem2-center-item1">
      数据采集系统背景
      <p>
        现代商业渠道复杂多样，包括传统经销商、关键客户(KA)以及电子商务等多种方式。准确获取渠道需求信号对于需求驱动的深度营销至关重要。然而，由于信息技术水平不一致，渠道系统复杂，企业难以及时、准确地了解分销商的业务、库存和销售信息，导致库存积压、资金周转困难等问题。
      </p>
    </div>
    <div class="exampleitem2-center-item2">
      <!-- <div class="exampleitem2-center-item2-box" v-for="(item, index) in list">
        <div class="exampleitem2-center-item2-box-content">
          <div class="exampleitem2-center-item2-box-content-text">
            <h1>{{ item.title }}</h1>
            <p v-html="item.content.replace(/\n/g, '<br>')"></p>
          </div>
        </div>
      </div> -->
      <div class="exampleitem2-center-item2-box">
        <div class="exampleitem2-center-item2-box-content">
          <div class="exampleitem2-center-item2-box-content-text">
            <h1>数据采集方式</h1>
            <p>
              <span>直连采集：</span
              >通过DDI直连、接口或独立上传实现自动或手动数据采集。
            </p>
            <p><span>网提采集：</span>利用爬虫程序获取数据</p>
            <p><span>人工采集：</span>通过人工催收和邮件收集数据</p>
          </div>
        </div>
      </div>
      <div class="exampleitem2-center-item2-box">
        <div class="exampleitem2-center-item2-box-content">
          <div class="exampleitem2-center-item2-box-content-text">
            <h1>DDI直连采集优势</h1>
            <p><span>安装与运行：</span>安装便捷，首次配置后自动运行</p>
            <p><span>数据透明度：</span>数据透明，客户可实时查看抓取内容。</p>
            <p><span>操作简便性：</span>操作简单，无需额外操作。</p>
            <p><span>性能表现：</span>高性能，不影响客户数据库。</p>
            <p><span>数据安全性：</span>数据安全，采用SSH加密。</p>
            <p><span>传输效率：</span>传输速度快，数据经过压缩处理。</p>
            <p>
              <span>传输稳定性：</span>传输稳定，基于TCP协议，支持断点续传。
            </p>
          </div>
        </div>
      </div>
      <div class="exampleitem2-center-item2-box" v-for="(item, index) in list2">
        <div class="exampleitem2-center-item2-box-content">
          <div
            class="exampleitem2-center-item2-box-content-text"
            style="width: 45%"
          >
            <h1>{{ item.title }}</h1>
            <p
              style="text-indent: 2em"
              v-html="item.content.replace(/\n/g, '<br>')"
            ></p>
          </div>
        </div>
      </div>
    </div>
    <div class="exampleitem2-center-item3">
      <h1>实施流程</h1>
      <img src="@/assets/img/exampleitem2/lct.png" alt="" />
    </div>
  </div>
  <BackTop />
  <Recommend backColor="#f3f3f6" />
  <pageBottom backColor="#f3f3f6" />
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted, watch } from "vue";
import NavHeader from "@/components/NavHeader.vue";
import pageBottom from "@/components/pageBottom.vue";
import BackTop from "@/components/BackTop.vue";
import Recommend from "@/components/Recommend.vue";
let list = reactive([
  {
    title: "数据采集方式",
    content: `♢  直连采集:通过DDI直连、接口或独立上传实现自动或手动数据采集。\n♢  网提采集:利用爬虫程序获取数据。\n♢  人工采集:通过人工催收和邮件收集数据`,
  },
  {
    title: "DDI直连采集优势",
    content: `♢  安装便捷，首次配置后自动运行。\n♢  数据透明，客户可实时查看抓取内容。\n♢  操作简单，无需额外操作。\n♢  高性能，不影响客户数据库。\n♢  数据安全，采用SSH加密。\n♢  传输速度快，数据经过压缩处理。\n♢  传输稳定，基于TCP协议，支持断点续传。`,
  },
]);
let list2 = reactive([
  {
    title: "监控管理机制",
    content:
      "全程监控管理，包括实施安装监控、数据处理监控、数据采集监控、申诉处理反馈等，确保数据质量。",
  },
]);
</script>
<style lang="scss" scoped>
.exampleitem2-top {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("@/assets/img/exampleitem2/bg.png");
  height: 100vh;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4784313725);
  }
  &-content {
    position: absolute;
    margin-left: 18%;
    top: 50%;
    h1 {
      margin-bottom: 20px;
      font-weight: 700;
      font-size: 35px;
    }
  }
}
.exampleitem2-center {
  color: #000;
  background-color: #fff;
  padding-top: 20px;
  &-item1 {
    width: 100%;
    text-align: center;
    color: #333;
    font-size: 36px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #333333;
    background-image: url("@/assets/img/exampleitem2/item1bg.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: 0 52px;
    height: 330px;
    border-radius: 20px;
    padding-top: 50px;
    p {
      font-size: 18px;
      font-weight: normal;
      color: #666;
      text-align: center;
      line-height: 35px;
      width: 70%;
      margin: 30px auto;
    }
  }
  &-item2 {
    width: 1220px;
    margin: 0 auto;
    text-align: center;
    line-height: 30px;
    color: #333;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    &-box {
      width: 100%;
      background-color: #ffffff;
      border-radius: 20px;
      padding: 50px;
      margin-bottom: 30px;
      background-image: url("@/assets/img/exampleitem2/itembg.png");
      filter: opacity(0.9);
      background-size: 110% auto;
      // background-position: 20px 0;
      &-content {
        display: flex;
        justify-content: flex-start;
        text-align: left;
        align-items: center;
        height: 100%;
        &-text {
          width: 55%;
          height: 100%;
          margin: 30px 0;
          margin-right: 30px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          h1 {
            margin-bottom: 30px;
          }
          p {
            line-height: 35px;
            font-size: 18px;
            color: #666;
            span {
              font-weight: 700;
            }
          }
        }
      }
    }
  }
  &-item3 {
    text-align: center;
    width: 100%;
    background-color: #f3f3f6;
    padding-top: 10px;
    margin-top: 50px;
    padding-bottom: 100px;
    h1 {
      margin: 40px 0;
      margin-top: 70px;
      font-size: 35px;
    }
    img {
      width: 50%;
    }
  }
}
</style>
